<template>
  <div class="app-container calendar-list-container">
    <!-- <h3>菜单管理</h3> -->
    <!-- <div class="filter-container">
      <el-button-group>
        <el-button type="primary" v-if="menuManager_btn_add" icon="plus" @click="handlerAdd">添加</el-button>
        <el-button type="primary" v-if="menuManager_btn_edit" icon="edit" @click="handlerEdit">编辑</el-button>
        <el-button type="primary" v-if="menuManager_btn_del" icon="delete" @click="handleDelete">删除</el-button>
      </el-button-group>
    </div>-->

    <el-row>
      <el-col :span="5" style="margin-top:15px;">
        <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
        <el-tree class="filter-tree" :data="treeData" node-key="id" highlight-current :props="defaultProps" :filter-node-method="filterNode" ref="menuTree" @node-click="getNodeData" default-expand-all></el-tree>
      </el-col>
      <el-col :span="19" style="margin-top:15px;">
        <el-card class="box-card">
          <div>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content bg-purple flexoutf">
                  <span class="fontcode">编码(code):</span>
                  <el-input class="elinp" v-model="seachMenu.code" placeholder="请输入内容" size="mini" clearable @clear="clearSeach('code')"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple flexoutf">
                  <span class="fontcode">名称(title):</span>
                  <el-input class="elinp" v-model="seachMenu.title" placeholder="请输入内容" size="mini" clearable @clear="clearSeach('title')"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="seachMainFun">搜索</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 新增按钮 -->
          <div class="adds_btn" style=" margin: 10px 0px;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="clickAddFun">添加</el-button>
          </div>
          <!-- 表格 -->
          <el-table size="mini" :data="tableData_right" border style="width: 100%">
            <el-table-column fixed prop="code" align="center" label="编码" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column fixed prop="title" align="center" label="名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="type" align="center" label="类型" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="href" align="center" label="路径" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="上级节点" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <!-- {{scope.row.parentId}} -->
                <span v-for="(item2,index2) in BtnUpFromoptions" :key="index2">
                  <span v-if="scope.row.parentId==item2.value">{{item2['label']}}</span>
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="icon" label="图标" :show-overflow-tooltip="true"></el-table-column> -->
            <el-table-column prop="orderNum" align="center" label="序号" :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column prop="description" label="描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="attr1" label="目标位置" :show-overflow-tooltip="true"></el-table-column>-->
            <el-table-column fixed="right" align="center" label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click="firstExamine(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="firstCompile(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="firstEliminate(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="firstBtn(scope.row)" type="text" size="small">按钮配置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="currentSize" layout="total, prev, pager, next" :total="currentTotal"></el-pagination>
            <!-- 弹窗 查看 -->
            <el-dialog title="查看" :visible.sync="ExamineDia" width="400px" :before-close="handleClose">
              <!-- <span>{{ExamineObj}}</span> -->
              <div class="examine">
                <div class="line">
                  <span class="left">编码</span>
                  <span class="right">{{ExamineObj.code}}</span>
                </div>
                <div class="line">
                  <span class="left">名称</span>
                  <span class="right">{{ExamineObj.title}}</span>
                </div>
                <div class="line">
                  <span class="left">类型</span>
                  <span class="right">{{ExamineObj.type}}</span>
                </div>
                <div class="line">
                  <span class="left">路径</span>
                  <span class="right">{{ExamineObj.path}}</span>
                </div>
                <div class="line">
                  <span class="left">更新时间</span>
                  <span class="right">{{ExamineObj.updateDate}}</span>
                </div>
                <div class="line">
                  <span class="left">更新人</span>
                  <span class="right">{{ExamineObj.updateName}}</span>
                </div>
              </div>

              <span slot="footer" class="dialog-footer">
                <!-- <el-button size="mini" @click="ExamineDia = false">取 消</el-button> -->
                <el-button size="mini" type="primary" @click="ExamineDia = false">确 定</el-button>
              </span>
            </el-dialog>
            <!-- 弹窗 编辑 -->
            <el-dialog title="编辑" :visible.sync="CompileDia" width="800px" :before-close="handleClose">
              <!-- <span>{{CompileObj}}</span> -->
              <div class="compile">
                <!-- 第一行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">编码</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="CompileObjClone.code" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['code']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">名称</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="CompileObjClone.title" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['title']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">上级节点</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-select class="select_style" v-model="CompileObjClone.parentId" filterable size="mini" placeholder="请选择">
                                <el-option v-for="item in BtnUpFromoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                              </el-select>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['parentId']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">路径</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="CompileObjClone.href" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['href']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">图标</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-select class="select_style" v-model="CompileObjClone.icon" size="mini" filterable placeholder="请选择">
                                <el-option v-for="item in iconDataClone" :key="item.value" :label="item.label" :value="item.value" style="width:190px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                  <i :class="item.value"></i>
                                  <!-- <i v-if="item.label.includes('el-icon')" :class="item.value"></i>
                                  <i v-else class="icon iconfont" :class="item.value"></i> -->
                                  <span>{{item.label}}</span>

                                </el-option>
                              </el-select>
                              <!-- <el-input v-model="CompileObjClone.icon" placeholder="请输入内容" size="mini"></el-input> -->

                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['icon']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">类型</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="CompileObjClone.type" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['type']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第四行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">序号</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="CompileObjClone.orderNum" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['orderNum']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <!-- <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">描述</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input
                                v-model="CompileObjClone.description"
                                placeholder="请输入内容"
                                size="mini"
                              ></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="必填项！"
                                placement="bottom-end"
                                v-show="!CompileObjClone['description']"
                              >
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>-->
                  </el-col>
                </el-row>
                <!-- 第五行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">地址</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="CompileObjClone.path" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!CompileObjClone['path']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <!-- <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">目标位置</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input
                                v-model="CompileObjClone.attr1"
                                placeholder="请输入内容"
                                size="mini"
                              ></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="必填项！"
                                placement="bottom-end"
                                v-show="!CompileObjClone['attr1']"
                              >
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>-->
                  </el-col>
                </el-row>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="CompileDiaFun" size="mini">修 改</el-button>
                <el-button @click="CompileDia = false" size="mini">取 消</el-button>
              </span>
            </el-dialog>
            <!-- 弹窗 添加 -->
            <el-dialog title="添加" :visible.sync="AddDia" width="800px" :before-close="handleClose">
              <div class="adds">
                <!-- 第一行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">编号code</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.code" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.code==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">名称title</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.title" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.title==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">类型type</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.type" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.type==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">路径href</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.href" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.href==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">图标icon</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <!-- <el-input v-model="AddObj.icon" placeholder="请输入内容" size="mini"></el-input> -->
                              <el-select class="select_style" v-model="AddObj.icon" size="mini" filterable placeholder="请选择">
                                <el-option v-for="item in iconDataClone" :key="item.value" :label="item.label" :value="item.value" style="width:190px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                  <i :class="item.value"></i>
                                  <span>{{item.label}}</span>
                                </el-option>
                              </el-select>
                              <!-- {{iconData}} -->
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.icon==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">序号</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.orderNum" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.orderNum==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第四行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">地址path</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.path" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.path==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <!-- <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">位置attr1</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input v-model="AddObj.attr1" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="必填项！"
                                placement="bottom-end"
                                v-show="AddObj.attr1==''"
                              >
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>-->
                  </el-col>
                </el-row>
                <!-- 第五行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">上级节点</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-select class="select_style" v-model="AddObj.parentId" filterable size="mini" placeholder="请选择">
                                <el-option v-for="item in BtnUpFromoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                              </el-select>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="AddObj.parentId==''">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <!-- <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">描述description</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input
                                v-model="AddObj.description"
                                placeholder="请输入内容"
                                size="mini"
                              ></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="必填项！"
                                placement="bottom-end"
                                v-show="AddObj.description==''"
                              >
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>-->
                  </el-col>
                </el-row>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addsFun" size="mini">添 加</el-button>
                <el-button @click="AddDia = false" size="mini">取 消</el-button>
              </span>
            </el-dialog>
            <!-- 弹窗 按钮编辑 -->
            <el-dialog title="按钮编辑" :visible.sync="BtnDia" width="800px" :before-close="handleClose">
              <!-- 按钮 -->
              <div class="btntop">
                <!-- 第一行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">按钮名称</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input :disabled="disinput" v-model="Btn_from.name" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!Btn_from['name']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">编码code</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input :disabled="disinput" v-model="Btn_from.code" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!Btn_from['code']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">地址uri</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input :disabled="disinput" v-model="Btn_from.uri" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!Btn_from['uri']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">类型type</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input :disabled="disinput" v-model="Btn_from.type" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!Btn_from['type']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row :gutter="20" class="height_c">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!-- 里层 1/4-->
                      <el-row>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple cowcenter">方法</div>
                          </el-col>
                          <el-col :span="13">
                            <div class="grid-content bg-purple-light">
                              <el-input :disabled="disinput" v-model="Btn_from.method" placeholder="请输入内容" size="mini"></el-input>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="grid-content bg-purple cowcenter">
                              <el-tooltip class="item" effect="dark" content="必填项！" placement="bottom-end" v-show="!Btn_from['method']">
                                <el-button class="exclamation">！</el-button>
                              </el-tooltip>
                            </div>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-col>
                  <!-- 外层  2/2-->
                  <el-col :span="12">
                    <!-- 占位的 -->
                  </el-col>
                </el-row>
                <!-- 按钮 -->
                <el-row :gutter="20" style="padding: 10px 10px 20px 10px;">
                  <el-button v-show="baoCunSwitch" type="primary" size="mini" icon="el-icon-bank-card" @click="Save301">保存</el-button>
                  <el-button type="danger" size="mini" icon="el-icon-bank-card" @click="Cancel301">取消保存</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus" v-show="!affirm" @click="Add301">添加</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus" v-show="affirm&&!baoCunSwitch" @click="AffirmAdd301">确认添加</el-button>
                </el-row>
              </div>
              <!-- 按钮编辑的表格 -->
              <el-table size="mini" :data="BtnTableData" border style="width: 100%">
                <el-table-column fixed prop="name" label="按钮名称" width="120"></el-table-column>
                <el-table-column prop="code" label="编码" width="180"></el-table-column>
                <el-table-column prop="type" label="类型" width="120"></el-table-column>
                <el-table-column prop="uri" label="uri" width="120"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="BtnCompile301(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="BtnDelete301(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="closeBtnDia">确 定</el-button>
                <el-button size="mini" @click="closeBtnDia">取 消</el-button>
              </span>
            </el-dialog>
          </div>
        </el-card>
        <!-- <el-card class="box-card">
          <span>按钮或资源</span>
          <menu-element :menuId='currentId' ref="menuElement"></menu-element>
        </el-card> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  fetchTree,
  getObj,
  addObj,
  delObj,
  putObj,
  postPageSize, //右侧表格的分页
  getBaseMenu, //根据ID查询BaseMenu数据
  putBaseMenu, //修改BaseMenu数据
  deleteBaseMenu, //根据ID删除品牌数据
  postAddMenu, //新增BaseMenu菜单
  getMenuId, //查询选中菜单下的按钮
  postbaseElementBtn, //保存按钮接口
  NodeBtnBaseMenu, //节点选择器
  postElementAdd, //添加按钮
  putElementAdd, //保存按钮
  deleteElementAdd, //删除按钮
} from 'api/admin/menu/index'
//查看组件
import ExamineDia from './components/ExamineDia'
import { mapGetters } from 'vuex'
import { iconData } from './components/icon.js'
// import router from './router';
export default {
  // name: "menu",
  // components: {
  //   "menu-element": () => import("./components/element")
  // },

  data() {
    return {
      //菜单搜索
      seachMenu: {
        code: '',
        title: '',
      },
      //
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: ['menu', 'dirt'],
      listQuery: {
        name: undefined,
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      labelPosition: 'right',
      form: {
        code: undefined,
        title: undefined,
        parentId: undefined,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        path: undefined,
        // description: undefined,
        path: undefined,
        enabled: undefined,
        type: undefined,
        // attr1: undefined
      },
      currentId: -1,
      menuManager_btn_add: true,
      menuManager_btn_edit: true,
      menuManager_btn_del: true,
      //
      tableData_right: [],
      //分页器
      currentPage: 1,
      currentSize: 10,
      currentTotal: 1000,
      //查看dia
      ExamineDia: false, //默认关闭查看
      //查看对象
      ExamineObj: {}, //查看展示的数据
      //编辑dia
      CompileDia: false, //弹窗
      //编辑对象
      CompileObj: {
        code: '',
      },
      //克隆编辑的对象
      CompileObjClone: {
        code: '',
        title: '',
        parentId: '',
        href: '',
        icon: '',
        type: '',
        orderNum: '',
        // description: "",
        path: '',
        // attr1: ""
      },
      //添加弹窗开关
      AddDia: false,
      //添加对象
      AddObj: {
        code: '',
        title: '',
        parentId: '',
        href: '',
        icon: '',
        type: '',
        orderNum: '',
        // description: "",
        path: '',
        // attr1: ""
      },
      //按钮编辑弹窗开关
      BtnDia: false,
      //
      //按钮编辑的表格
      BtnTableData: [],
      //按钮编辑里面的 from
      BtnUpFrom: {
        name: '',
        id: '',
      },
      //节点选择器数据
      BtnUpFromoptions: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ],
      //按钮编辑里面 按钮输入框
      Btn_from: {
        id: '', //添加的时候删掉此属性
        menuId: '', //最外面的菜单id
        name: '', //按钮名称
        code: '', //编码code
        uri: '', //uri
        type: '', //类型
        method: '', //方式
      },
      affirm: true, //true=显示’确认添加‘按钮，false=显示’添加‘按钮
      baoCunSwitch: false, //保存按钮
      disinput: false, //隐藏

      iconDataClone: [],
    }
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val)
    },
  },
  created() {
    console.log('图标的迷失操作;;', iconData, this.iconDataClone)
    this.iconDataClone = iconData
    this.getList()
    this.postPageSizeRequest(this.currentPage, this.currentSize)
    //节点选择器
    NodeBtnBaseMenu().then((resp) => {
      let btnarr = resp.data
      this.BtnUpFromoptions = []
      btnarr.forEach((val) => {
        let obj = {}
        obj['label'] = val['title']
        obj['value'] = val['id']
        this.BtnUpFromoptions.push(obj)
      })
      console.log('节点选择器')
      console.log(this.BtnUpFromoptions)
    })
  },
  computed: {
    ...mapGetters(['elements']),
  },
  methods: {
    //搜索框删除
    clearSeach(msg) {
      if (msg == 'code') {
        this.seachMenu.code = ''
        this.postPageSizeRequest(
          this.currentPage,
          this.currentSize,
          this.seachMenu
        )
      } else if (msg == 'title') {
        this.seachMenu.title = ''
        this.postPageSizeRequest(
          this.currentPage,
          this.currentSize,
          this.seachMenu
        )
      }
    },
    //..新的.......
    //搜索
    seachMainFun() {
      this.postPageSizeRequest(
        this.currentPage,
        this.currentSize,
        this.seachMenu
      )
    },
    postPageSizeRequest(page, size, obj) {
      postPageSize(page, size, obj)
        .then((resp) => {
          // console.log("YYYYYYYY分页YYYYYYYY");
          // console.log(resp);
          this.tableData_right = resp.data.list
          this.currentTotal = resp.data.total
        })
        .catch(() => {
          console.log('表格分页接口没拿到！')
        })
    },
    //查看
    firstExamine(row) {
      this.ExamineDia = true
      getBaseMenu(row.id)
        .then((resp) => {
          this.ExamineObj = resp.data
        })
        .catch(() => {
          console.log('没拿到：根据ID查询BaseMenu数据!')
        })
    },
    //提示
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    //编辑
    firstCompile(row) {
      this.CompileDia = true
      getBaseMenu(row.id)
        .then((resp) => {
          this.CompileObj = resp.data
          this.CompileObjClone = JSON.parse(JSON.stringify(this.CompileObj))
          console.log('编辑数据--', this.CompileObjClone)
        })
        .catch(() => {
          console.log('没拿到：根据ID查询BaseMenu数据!')
        })
    },
    //点击弹窗修改按钮
    CompileDiaFun() {
      console.log(this.CompileObjClone)
      //添加的不为空校验
      let verify = true
      let KeysArr = Object.values(this.CompileObjClone)
      KeysArr.forEach((val) => {
        if (val === '') {
          verify = false
        }
      })
      if (verify) {
        //通过校验
        let id = this.CompileObjClone.id
        let obj = this.CompileObjClone
        //1.保存数据 2.更新表格
        putBaseMenu(id, obj).then((resp) => {
          this.postPageSizeRequest(this.currentPage, this.currentSize)
          this.CompileDia = false
        })
        this.$notify({
          title: '修改成功！',
          message: '',
          type: 'success',
        })
        //3.树形图更新
        console.log('更新树形图')
        let para = {
          token: this.$store.state.user.token,
          sysCompanyCode: this.$store.state.user.sys_Company_Code,
        }
        fetchTree(para).then((resp) => {
          console.log(resp)
          this.treeData = JSON.parse(JSON.stringify(resp))
        })
      } else {
        //没通过校验
        this.$message({
          message: '请复核校验规则！',
          type: 'warning',
        })
      }
    },
    //删除
    firstEliminate(row) {
      this.$confirm('确认删除？') //弹窗
        .then((_) => {
          deleteBaseMenu(row.id).then((resp) => {
            this.postPageSizeRequest(this.currentPage, this.currentSize)
          })
          done()
        })
        .catch((_) => {})
    },
    //按钮编辑
    firstBtn(row) {
      this.BtnDia = true
      getMenuId(row.id).then((resp) => {
        console.log(resp)
        this.BtnTableData = resp.data
        // console.log(row)
        //赋值Btn_from.menuId
        this.Btn_from.menuId = row.id
      })
    },
    //添加按钮
    clickAddFun() {
      this.AddDia = true
    },
    //弹窗里面的添加
    addsFun() {
      //添加的不为空校验
      let verify = true
      let KeysArr = Object.values(this.AddObj)
      KeysArr.forEach((val) => {
        if (val == '') {
          verify = false
        }
      })

      if (verify) {
        //通过校验了
        //添加方法
        let obj = this.AddObj
        console.log(this.AddObj)
        postAddMenu(obj).then((resp) => {
          this.AddDia = false //关闭弹窗
          this.AddObj = {} //清空
          //添加问题！！！！！！！！
          this.$notify({
            title: '添加成功！',
            message: '',
            type: 'success',
          })
        })
        console.log('更新树添加')
        let para = {
          token: this.$store.state.user.token,
          sysCompanyCode: this.$store.state.user.sys_Company_Code,
        }
        fetchTree(para).then((resp) => {
          console.log(resp)
          this.treeData = JSON.parse(JSON.stringify(resp))
        })
      } else {
        //没通过校验
        this.$message({
          message: '请复核校验规则！',
          type: 'warning',
        })
      }
    },
    //按钮编辑 编辑
    BtnCompile301(row) {
      console.log('按钮编辑 编辑')
      console.log(row)
      let CloneRow = JSON.parse(JSON.stringify(row))
      this.Btn_from = CloneRow
      this.baoCunSwitch = true
      this.disinput = false
    },
    //按钮编辑 删除
    BtnDelete301(row) {
      console.log('按钮编辑 删除')
      console.log(row)
      this.$confirm('确认删除？')
        .then((_) => {
          let id = row.id
          deleteElementAdd(id).then((resp) => {
            let id = this.Btn_from.menuId
            getMenuId(id).then((resp) => {
              // console.log()
              this.BtnTableData = resp.data //更新表格
              //this.affirm = false; //让添加按钮显示，确认添加隐藏
              this.$notify({
                title: '删除成功！',
                message: '',
                type: 'success',
              })
            })
          })
          done()
        })
        .catch((_) => {})
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.postPageSizeRequest(
        this.currentPage,
        this.currentSize,
        this.seachMenu
      )
    },
    //按钮编辑弹窗表格选中的项301
    // BtnCurrentChange301(val){
    //   console.log('按钮编辑弹窗表格选中的项301')
    //   console.log(val)
    //   this.Btn_from=val
    // },
    //按钮编辑弹窗的保存301
    Save301() {
      console.log('按钮编辑弹窗的保存301')
      console.log(this.Btn_from)
      let id = this.Btn_from.id
      let obj = JSON.parse(JSON.stringify(this.Btn_from))
      delete obj['id']
      let verify = true
      let KeysArr = Object.values(obj)
      KeysArr.forEach((val) => {
        if (val == '') {
          verify = false
        }
      })

      if (verify) {
        //通过校验
        putElementAdd(id, obj).then((resp) => {
          this.$notify({
            title: '修改成功！',
            message: '',
            type: 'success',
          })

          let id = this.Btn_from.menuId
          getMenuId(id).then((resp) => {
            // console.log()
            this.BtnTableData = resp.data //更新表格
            this.affirm = false //让添加按钮显示，确认添加隐藏
            this.baoCunSwitch = false
            this.disinput = true
            this.Btn_from.name = ''
            this.Btn_from.code = ''
            this.Btn_from.uri = ''
            this.Btn_from.type = ''
            this.Btn_from.method = ''
          })
        })
      } else {
        console.log(verify)
        console.log(KeysArr)
        debugger
        //没通过校验
        this.$message({
          message: '请复核校验规则！',
          type: 'warning',
        })
      }
    },
    //取消编辑
    Cancel301() {
      let id = this.Btn_from.menuId
      getMenuId(id).then((resp) => {
        // console.log()
        this.BtnTableData = resp.data //更新表格
        this.affirm = false //让添加按钮显示，确认添加隐藏
      })
      this.$notify({
        title: '保存已取消！',
        message: '',
        type: 'warning',
      })
      //调取添加方法
      this.Add301()
    },
    //按钮编辑弹窗的添加301   清空而已
    Add301() {
      console.log('按钮编辑弹窗的添加301')
      this.Btn_from.name = ''
      this.Btn_from.code = ''
      this.Btn_from.uri = ''
      this.Btn_from.type = ''
      this.Btn_from.method = ''
      this.disinput = false
      // this.Btn_from={
      //   name: "", //按钮名称
      //   code: "", //编码code
      //   uri: "", //uri
      //   type: "", //类型
      //   method: "", //方式
      // }
      //添加按钮隐藏，确认添加显示
      this.affirm = true
      this.$notify.info({
        title: '请输入您想要添加的功能！',
        message: '',
      })
    },
    //按钮编辑弹窗的确认添加301 调接口添加
    AffirmAdd301() {
      console.log('按钮编辑弹窗的确认添加301')
      console.log(this.Btn_from)
      let obj = JSON.parse(JSON.stringify(this.Btn_from))
      delete obj['affirm']
      delete obj['id']
      console.log(obj)
      //去掉没必要的属性之后校验
      let verify = true
      let KeyArr = Object.values(obj)
      KeyArr.forEach((val) => {
        if (val == '') {
          verify = false
        }
      })
      console.log(verify)
      if (verify) {
        //通过校验
        postElementAdd(obj).then((response) => {
          this.$notify({
            title: '添加成功',
            message: '',
            type: 'success',
          })
          //更新表格
          let id = this.Btn_from.menuId
          getMenuId(id).then((resp) => {
            // console.log()
            this.BtnTableData = resp.data //更新表格
            this.affirm = false //让添加按钮显示，确认添加隐藏
            this.disinput = true
          })
        })
      } else {
        //没通过校验
        this.$message({
          message: '请复核校验规则！',
          type: 'warning',
        })
      }
    },
    //关闭窗口
    closeBtnDia() {
      this.BtnDia = false
      this.Btn_from = {
        id: '', //添加的时候删掉此属性
        menuId: '', //最外面的菜单id
        name: '', //按钮名称
        code: '', //编码code
        uri: '', //uri
        type: '', //类型
        method: '', //方式
        affirm: true, //true=显示’确认添加‘按钮，false=显示’添加‘按钮
      }
    },
    //..以前的.....
    getList() {
      let para = {
        token: this.$store.state.user.token,
        sysCompanyCode: this.$store.state.user.sys_Company_Code,
      }
      fetchTree(para).then((data) => {
        this.treeData = data
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(data.id).then((response) => {
        console.log('目标！')
        this.form = response.data
      })
      console.log({ menuId: data.id })
      this.currentId = data.id
      this.showElement = true
      /*  this.$refs.menuElement.menuId = data.id
      this.$refs.menuElement.getList() */
    },
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handlerAdd() {
      this.resetForm()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList()
          this.resetForm()
          this.onCancel()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
          })
        })
      })
    },
    update() {
      putObj(this.form.id, this.form).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000,
        })
      })
    },
    create() {
      addObj(this.form).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000,
        })
      })
    },
    onCancel() {
      this.formEdit = true
      this.formStatus = ''
    },
    resetForm() {
      this.form = {
        code: undefined,
        title: undefined,
        parentId: this.currentId,
        href: undefined,
        path: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined,
      }
    },
    handleChange(value) {
      console.log(value)
      console.log(value[value.length - 1])
      this.form.parentId = value[value.length - 1]
    },
  },
}
</script>
<style lang="scss" scoped>
//查看
.examine {
  padding: 10px;
  // background: teal;
  .line {
    border-bottom: 1px solid #f1f3f4;
    line-height: 30px;
    .left {
      margin-right: 10px;
    }
  }
}
//编辑,添加，按钮编辑头部
.compile,
.adds,
.btntop {
  //文字居中
  .cowcenter {
    margin: 4px 0px;
  }
  //感叹号
  .exclamation {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0px 5px 1px 5px;
    border-radius: 50%;
    background: #e69620;
    color: #fff;
    margin-left: 10px;
    list-style: none;
    cursor: pointer;
  }
  //编辑的行高
  .height_c {
    margin: 10px 0px;
  }
  .select_style {
    width: 194px;
  }
  //日期控件
  .date_style {
    width: 194px;
  }
  //添加按钮

  //提示
  .box {
    width: 400px;

    .top {
      text-align: center;
    }

    .left {
      float: left;
      width: 60px;
    }

    .right {
      float: right;
      width: 60px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
      margin: 4px;
    }

    .left .el-tooltip__popper,
    .right .el-tooltip__popper {
      padding: 8px 10px;
    }
  }
}
.flexoutf {
  display: flex;
  .fontcode {
    width: 150px;
  }
  .elinp {
    box-flex-group: 100;
  }
}
</style>

